import React from 'react'


import {
    DeviceEventEmitter,
    Dimensions,
    Image,
    NativeModules,
    Platform,
    StyleSheet,
    Text,
    TouchableOpacity,
    View
} from 'react-native';
import BasePage from './Component/Common/BasePage';
import {NavigationBar} from 'teaset';
import CommonStyle from "./Component/CommonStyle";

import SQLite from './SQLite';
import Kuaiopage from "./Kuaiopage";
import PageView from "./Component/Common/PageView";

var sqLite = new SQLite();
var db;

const defaultOptions = {
    imageCount: 1,             // 最大选择图片数目，默认6
    isRecordSelected: false,   // 是否已选图片
    isCamera: true,            // 是否允许用户在内部拍照，默认true
    isCrop: true,             // 是否允许裁剪，默认false, imageCount 为1才生效
    CropW: ~~(width * 0.6),    // 裁剪宽度，默认屏幕宽度60%
    CropH: ~~(width * 0.6),    // 裁剪高度，默认屏幕宽度60%
    isGif: false,              // 是否允许选择GIF，默认false，暂无回调GIF数据
    showCropCircle: true,     // 是否显示圆形裁剪区域，默认false
    circleCropRadius: width / 2, // 圆形裁剪半径，默认屏幕宽度一半
    showCropFrame: true,       // 是否显示裁剪区域，默认true
    showCropGrid: false,       // 是否隐藏裁剪区域网格，默认false
    quality: 90,               // 压缩质量
    enableBase64: false,       // 是否返回base64编码，默认不返回
};
const {RNSyanImagePicker} = NativeModules;

const {width} = Dimensions.get('window');

//todo 场景选择
export default class AddPage extends BasePage {


    constructor(props) {
        super(props);
        this.state = {
            ...this.state,
            head: require('./images/head.png'),

            name: '',

        };

    }


    renderNavigationBar() {
        return (
            <NavigationBar
                style={{backgroundColor: 'white',}}

                title={
                    <View style={{
                        flexDirection: 'row',
                        justifyContent: 'center',
                        alignSelf: 'center',

                    }}>
                        <Text style={{
                            fontSize: 20,
                            color: '#333333'
                        }}>添加动作</Text>
                    </View>}

                leftView={<TouchableOpacity
                    onPress={() => {


                        this.navigator.pop();


                        // DeviceEventEmitter.emit('my', {text: '刷新'})

                    }}
                >
                    <Image style={{width: 15, height: 15, marginLeft: 20}} source={require('./images/btn_back.png')}/>

                </TouchableOpacity>}

            />

        );
    }


    _onChangeText(inputData) {
        console.log("输入的内容", inputData);
        //把获取到的内容，设置给showValue
        // this.setState({showValue: inputData});
    }

    componentWillMount() {


        this.showLoad(true)
        setTimeout(this.openApp.bind(this), 2000);
    }

    openApp() {
        this.showLoad(false)
    }

    renderPage() {


        return (


            <PageView style={{
                flex: 1
            }} hiddenNav={true} fromPage={this} {...this.state}>
                <View style={{
                    flexDirection: 'column',
                    marginTop: 70,
                    flex: 1
                }}>
                    <View style={{
                        height: 40,
                        justifyContent: 'center'
                    }}>
                        <Text style={{
                            color: '#666666',
                            marginLeft: 15,
                            fontSize: 15
                        }}>
                            通用
                        </Text>
                    </View>

                    <TouchableOpacity
                        onPress={() => {

                            this.navigator.push({
                                view: <Kuaiopage/>
                            })
                        }}
                    >
                        <View style={{
                            alignItems: 'center',
                            flexDirection: 'row',
                            height: 50,
                            backgroundColor: 'white'
                        }}>


                            <Image style={{width: 40, height: 40, marginLeft: 20}}
                                   source={require('./images/quan.png')}/>
                            <Text style={{
                                color: '#333333',
                                fontSize: 15, marginLeft: 10
                            }}>
                                开关某条自动化
                            </Text>
                            <Image
                                source={require('./images/go.png')}
                                style={{
                                    width: 15,
                                    height: 15,
                                    position: 'absolute',
                                    right: 20
                                }}/>
                        </View>
                    </TouchableOpacity>
                </View>
            </PageView>
        );

    }

    componentDidMount() {
        this.setState({
            refreshing: true,
        })
        setTimeout(() => {
            this.setState({
                refreshing: false,
            })
        }, 3000)
    }


}
let screenW = Dimensions.get('window').width;
let screenH = Dimensions.get('window').height;
// iPhoneX
const X_WIDTH = 375
const X_HEIGHT = 812
const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginBottom: Platform.OS === 'ios' &&
        ((screenH === X_HEIGHT && screenW === X_WIDTH) ||
            (screenH === X_WIDTH && screenW === X_HEIGHT)) ? 34 : null
    },
    title: {
        flexDirection: 'row',
        width: CommonStyle.screenwidth
    },
    title_left: {
        marginLeft: 15,
        alignSelf: 'center'
    },

});
